<template>
  <form-dialop
    :title="$t('order.action.change_desktop')"
    :visible="visible"
    width="35%"
    @handleClose="handleClose"
  >
    <template #content>
      <el-form ref="form" :model="formData" :rules="formRule" label-width="120px" v-loading="loading">
        <el-form-item :label="$t('order.desktopId')" prop="machine_id" name="machine_id">
          <el-input v-model="formData.machine_id" @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item :label="$t('order.desktopName')" prop="desktop_name" name="desktop_name">
          <el-input  v-model="formData.desktop_name" @keyup.enter.native="submit"></el-input>
        </el-form-item>
			</el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import { AppModule } from '../../../store/modules/app';
export default Vue.extend({
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      language: AppModule.language,
      formData: {
        order_id: "",
        machine_id: ""
      },
      allData:'',
      formRule: {
        machine_id: [
          { required: true, message: this.$t('order.formValite.desktopId'), trigger: 'blur' },
          { max: 40, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ],
        desktop_name: [
          { required: true, message: this.$t('order.formValite.desktopName'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("user.telephoneMaxRule"), trigger: 'change' }
        ]
      }
    }
  },
  created() {
  },
  methods: {
   async init(data: any) {
			this.formData = {
        order_id: "",
        machine_id: ""
      };
      this.allData = JSON.parse(JSON.stringify(data))
      this.$nextTick(() => {
          if (this.$refs['form']) {
            (this.$refs['form'] as any).clearValidate();
          }
      })
			this.visible = true;
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
          this.loading = true;
          (this as any).$orinusApi.apiPatchDesktop(
            (this as any).allData.order_id, 
            (this as any).allData.id, 
            {desktop_id: (this as any).formData.machine_id, desktop_name: (this as any).formData.desktop_name} ).then((res: any) => {
              this.$message.success((this as any).$t('order.changeDesktopSuccess'));
              this.loading = false;
              this.visible = false;
              this.$emit('success')
            }).catch(()=> {
              this.$message.warning((this as any).$t('order.changeDesktopFail'))
              this.loading = false;
            })
        }
      });
    },
    handleClose() {
      this.formData = {
        order_id: "",
        machine_id: ""
      },
      this.allData = '';
      this.visible = false;
			this.loading = false;
    }
  }
})
</script>
